<template>
  <!-- 订单详情 -->
  <div>
    <!-- 订单详情 -->

    <div class="numberShowList-box">
      <div class="numberShowList">
        <!-- hor -->
        <div class="numberShowList-hor">
          <div class="numberShowList-text fl">
            <div class="numberShowList_choose">
              <span class="numberShowList-Text"
                >您已选定<span class="numberShowList-pretty">靓号</span></span
              >
              <div class="numberShowList_number-text">
                <!-- v-for="(item,index) in detailsData" :key="index" -->
                <!--  :class="setPhoneColor(item.lhArr[phoneIndex])" -->
                <!--   -->
                <span
                  v-for="(phoneItem, phoneIndex) in detailsData.lhArr"
                  :key="phoneIndex"
                  :class="setPhoneColor(phoneItem)"
                  >{{ detailsData.phone.split("")[phoneIndex] }}</span
                >
              </div>
            </div>
            <div class="numberShowList_choose">
              <span class="numberShowList-Text">已选定归属地</span>
              <!--号码归属地  -->
              <div class="numberShowList_choose_text">
                <!--numberShowList-Text  -->
                <span class="">
                  {{ this.detailsAddressProvince + this.detailsAddressCity }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="numberShowList-box-tips">
          <div class="numberShowList-tips">
            <span
              >抢号人多，如多次未抢成功，系统将会自动帮您挑选评分更高的靓号下单。</span
            >
          </div>
        </div> -->
        <!-- <div class="numberShowList-box-tips">
          <div class="numberShowList-imge">
            <span>收货地址</span>
          </div>
          right-icon="arrow"
        </div>             name="picker"-->
        <div class="Details-form">
          <van-field
            class="pickerMap"
            v-model="sendAddressInput"
            label="所在城市"
            placeholder="点击选择城市"
            @click="showPicker = true"
          />
          <i
            class="iconfont icon-you mapText-icon"
            @click="showPicker = true"
          ></i>
        </div>
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            item-height="50px"
            show-toolbar
            title="请选择地区"
            :columns="columns"
            @confirm="addonConfirm"
            @cancel="addonCancel"
          />
        </van-popup>
        <!-- right-icon="question-o" -->
        <div class="Details-form">
          <van-field
            v-model="detailsAddress"
            class="pickerMap"
            placeholder="请输入详细地址（*街道*门牌号*小区）"
          />
          <i
            class="iconfont icon-wenhao detail-icon"
            @click="detailsTips()"
          ></i>
        </div>

        <div class="Details-form">
          <van-field
            clearable
            v-model="phoneNumber"
            class="pickerMap"
            type="digit"
            label="联系电话"
            maxlength="11"
            placeholder="请输入联系电话，并保持畅通"
          />
        </div>
        <div class="Details-form">
          <van-field
            clearable
            @input="verificationNameForm"
            v-model="nameForm"
            placeholder="请输入姓名（已加密）"
            class="pickerMap"
            label="名字"
            maxlength="10"
          />
        </div>

        <div class="Details-form" v-show="showIdentity">
          <van-field
            clearable
            v-model="identity"
            placeholder="请输入身份证号（已加密）"
            class="pickerMap"
            label="身份证号"
            maxlength="18"
          />
        </div>

        <!-- 收货人信息 -->
        <!-- <div class="numberShowList-box-tips">
          <div class="numberShowList-imge">
            <span>收货人信息</span>
          </div>
        </div> -->
        <!-- 个人信息 form -->

        <!-- 阅读 button -->

        <!-- end -->
      </div>
    </div>

    <!-- end -->
  </div>
</template>

<script>
import ruleTransformation from "../assets/js/ruleTransformation";
import addressLists from "../assets/js/addressLists";
import getHttpsData from "../https/getHttpsData";
export default {
  props: ["orderDetails", "checkboxData"],
  data() {
    return {
      sendAddressInput: "",
      columns: addressLists,
      showPicker: false,

      detailsAddress: "",
      phoneNumber: "",
      nameForm: "",
      identity: "",
      showIdentity: false,
      // 详情页面
      numberShowIsShow: false,
      detailsData: [],
      uploadData: "",
      detailsAddressProvince: "",
      detailsAddressCity: "",

      numberData: "",

      areaShow: false,
      styleshuzu: "",
      upload: {
        account: "",
        cardCode: "981610241535",
        channel: "",
        clickId: "",
        // 联系手机号
        contactPhone: "",
        // 身份证
        idCard: "",
        // 姓名
        name: "",
        // 要买的手机号
        orderPhone: "",
        originality: "",
        page: "",
        phoneCityCode: "",
        phoneProvinceCode: "",
        plan: "",
        // 地址详情
        receivingAddress: "",
        // 详情地址的区号
        receivingCityCode: "",
        receivingDistrictCode: "",
        receivingProvinceCode: "",
        // creativetype: "",
      },
      checked: true,
      submitDisabled: false,
      isdisabledDown: false,
      isdisabled: true,
    };
  },
  methods: {
    // onConfirm(value) {
    //   this.value = value;
    //   this.showPicker = false;
    // },
    setPhoneColor(item) {
      // 0=红色；1=黑色；2=蓝色
      let res = "set-phone-black";
      if (item == 0) {
        res = "set-phone-red";
      }
      if (item == 1) {
        res = "set-phone-black";
      }
      if (item == 2) {
        res = "set-phone-blue";
      }
      return res;
    },
    detailsTips() {
      this.$toast(
        "请输入详细准确的地址，字数不少于6字(例如:**街道...)，且不能包含特殊符号(例如:？！/ ()等，可以输入小写-号)"
      );
    },
    addonConfirm(value, index) {
      let addres = this.columns;
      let city;
      let area;

      for (let i = 0; i < addres.length; i++) {
        // 省
        if (value[0] == addres[i].text) {
          this.upload.receivingProvinceCode = addres[i].provinceId;
          city = addres[i].children;

          break;
        }
      }
      for (let i = 0; i < city.length; i++) {
        // 市
        if (value[1] == city[i].text) {
          this.upload.receivingCityCode = city[i].cityId;
          area = city[i].children;
          break;
        }
      }
      for (let i = 0; i < area.length; i++) {
        // 区
        if (value[2] == area[i].text) {
          this.upload.receivingDistrictCode = area[i].districtId;
          break;
        }
      }
      this.sendAddressInput = value.toString();
      this.showPicker = false;
    },
    verificationNameForm() {
      this.showIdentity = true;
      console.log(1231111);
    },


    getSubmitParams() {
      if (this.detailsAddressProvince == "") {
        this.$toast("请先选择靓号");
        return false;
      }

      if (this.checkboxData) {
        this.$toast("请先阅读并勾选协议");
        return false;
      }
      // 所在省份
      if (!this.sendAddressInput[0]) {
        this.$toast("收货省市区不能为空");
        return false;
      }
      // 详细地址
      if (!this.detailsAddress) {
        this.$toast("请填写详细地址");
        return false;
      }
      if (ruleTransformation.chineseLen(this.detailsAddress) > 50) {
        this.$toast("详细地址过长，请您最多输入50个汉字");
        return false;
      }
      if (ruleTransformation.chineseLen(this.detailsAddress) < 4) {
        this.$toast("详细地址太短，请您最少输入4个汉字");
        return false;
      }
      // 联系电话 mobilePhoneId
      if (!this.phoneNumber) {
        this.$toast("请填写联系电话");
        return false;
      }
      if (!/^((13|15|18|14|17|16|19)+\d{9})$/.test(this.phoneNumber)) {
        this.$toast("联系电话格式有误");
        return false;
      }
      // 姓名
      if (!this.nameForm) {
        this.$toast("请填写姓名");
        return false;
      }
      if (ruleTransformation.chineseLen(this.nameForm) < 2) {
        this.$toast("姓名必须至少包含2个汉字");
        return false;
      }
      if (ruleTransformation.checkScript(this.nameForm)) {
        this.$toast("姓名包含非法字符");
        return false;
      }
      if (this.nameForm.length > 30) {
        this.$toast("姓名过长，最多输入30个汉字");
        return false;
      }
      // 身份证
      if (!this.identity) {
        this.$toast("请输入身份证");
        return false;
      }
      if (this.identity.length != 18) {
        this.$toast("身份证位数不正确");
        return false;
      }
      if (!ruleTransformation.checkCard(this.identity)) {
        this.$toast("请输入正确的身份证号");
        return false;
      }
      if (!ruleTransformation.checkCardAge(this.identity)) {
        this.$toast("身份证号码未满十六岁不能下单");
        return false;
      }
      if (ruleTransformation.checkCardAgeUpperLimit(this.identity, 70)) {
        this.$toast("身份证号码超出七十岁不能下单");
        return false;
      }
      this.submitDisabled = true;
      // phoneCityCode: "",
      //   phoneProvinceCode: "",




      // 详情地址区号

      this.upload.account = this.getUrlQueryString({ name: "account" });
      this.upload.channel = this.getUrlQueryString({ name: "channel" });
      // 广点通
      if (this.upload.channel == "gdt") {
        this.upload.clickId = this.getUrlQueryString({ name: "qz_gdt" });
        if (!this.upload.clickId) {
          this.upload.clickId = this.getUrlQueryString({ name: "gdt_vid" });
        }
      } else if (this.upload.channel == "kuaishou") {
        // 快手
        this.upload.clickId = this.getUrlQueryString({ name: "callback" });
      } else if (this.upload.channel == "toutiao") {
        // 头条
        // toutiao  creativetype
        this.upload.clickId = this.getUrlQueryString({ name: "clickid" });
      }
      // creativetype 有些网址没有
      // this.upload.creativetype = this.$route.query.creativetype;
      // 联系 号码
      this.upload.contactPhone = this.phoneNumber;
      // 身份证
      this.upload.idCard = this.identity;
      // 名字
      this.upload.name = this.nameForm;
      // 要买的手机号
      this.upload.orderPhone = this.detailsData.phone;
      this.upload.originality = this.getUrlQueryString({ name: "creativeid" }); 
      this.upload.phoneCityCode = this.uploadData.cityCode;
      // 获取省份id 进行参数上传
      this.upload.phoneProvinceCode = this.uploadData.provinceCode;

      this.upload.plan = this.getUrlQueryString({ name: "adid" });
      this.upload.page = this.getUrlQueryString({ name: "page" });
           // 详细地址
      this.upload.receivingAddress = this.detailsAddress;
            // 详情地址的区号
        // receivingCityCode: "",
        // receivingDistrictCode: "",
        // receivingProvinceCode: "",
      

      this.tipsToast("toast");
      // 进行数据上传
      getHttpsData
        .httpPost("/unicombj/order.do", this.upload)
        .then((res) => {
          console.log(res);
          // 停止提示
          this.tipsToast("10");
          if (!res.success) {
            this.$dialog.alert({
              message: res.msg,
              theme: "round-button",
            });
            this.submitDisabled = false;
          } else {
            this.submitDisabled = false;
            // window.location.href =
            //   "https://oss.10010wangka.com/page/com/success.html";
          }
        })
        .catch(() => {
          this.tipsToast("10");
          this.$dialog.alert({
            message: "网络延迟,请重试~",
            theme: "round-button",
          });
          this.submitDisabled = false;
        });
    },
    //加载动画
    tipsToast(duration) {
      this.$toast.loading({
        forbidClick: true,
        duration: duration,
      });
    }, // 获取url地址并截取
    getUrlQueryString({
      name,
      str = decodeURIComponent(window.location.search),
    }) {
      let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
        r = "";
      r =
        str.indexOf("?") != -1
          ? str.substr(str.indexOf("?") + 1).match(reg)
          : str.match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    addonCancel() {
      this.showPicker = false;
    },
    shujuda() {
      if (this.orderDetails != "") {
        console.log(this.orderDetails);
        console.log("有值");
      } else {
        console.log("没值");
      }
    },
    queryData(param) {
      localStorage.clear();
      this.detailsData = [];
      this.uploadData = param.goods;
      this.detailsData = param.selected;
      console.log(this.detailsData);
      // 最新数据
      this.detailsAddressProvince = param.goods.provinceName;
      this.detailsAddressCity = param.goods.cityName;
    },
  },
  //  监听父组件传来的值
  watch: {
    //监听value的变化，进行相应的操作即可
    orderDetails: function (a, b) {
      //a是value的新值，b是旧值
      this.queryData(a);
    },
  },
};
</script>

<style scoped >
.numberShowList-gb {
  width: 8rem;
}
.numberShowList-box {
  -webkit-overflow-scrolling: touch;
  /* background-color: rgb(247, 248, 250); */
  font-family: "微软雅黑";
}
.numberShowList {
  width: 100%;
  z-index: 2016;
  /* overflow: scroll; */
  height: 100%;
}

.numberShowList-hor {
  margin-top: 1rem;
}
.numberShowList-text {
  width: 8.64rem;
  margin-left: 0.4rem;
  line-height: 0.5rem;
  margin-top: 0.3rem;
}
.numberShowList_choose {
  width: 96%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  font-family: "粗体楷书";
}
.numberShowList-Text {
  font-size: 0.4rem;
  color: #fff;
  line-height: 0.8rem;
}
.numberShowList-number {
  color: #fe4365;
  font-size: 0.4rem;
  display: inline-block;
}
.numberShowList_number-text,
.numberShowList_choose_text {
  width: 65%;
  height: 0.9rem;
  border-radius: 0.1rem;
  font-size: 0.4rem;
  line-height: 0.9rem;
  text-align: center;
  background-color: #fff;
  font-weight: 600;
  font-family: "粗体楷书";
}
.numberShowList_choose_text {
  font-weight: 400;
}
.numberShowList-pretty {
  color: #fe4365;
  font-size: 0.4rem;
  font-family: "粗体楷书";
}

.numberShowList-box-tips {
  width: 92%;
  overflow: hidden;
  margin: auto;
}
.numberShowList-tips {
  font-size: 0.2rem;
  font-weight: 400;
  margin-top: 0.4rem;
  color: #6e6e6ec4;
}
.numberShowList-imge {
  height: 0.6rem;
  margin-top: 0.6rem;
  border-radius: 0.3rem;
  text-align: center;
  line-height: 0.6rem;
  color: #fff;
  background-image: linear-gradient(90deg, #4a6dfe, #3ff29d);
}
.numberShowListRegio {
  margin: auto;
  text-align: center;
}
.Details-form {
  position: relative;
  width: 93%;
  height: 1rem;
  margin: auto;
  margin-bottom: 0.4rem;
}
/*  */
.pickerMap {
  height: 1.1rem;
  font-size: 0.34rem !important;
  margin-top: 0.3rem;
  line-height: 0.55rem;
  font-family: "细体雅黑";
  border-radius: 0.2rem;
}
.mapText-icon,
.detail-icon {
  position: absolute;
  top: 50%;
  right: 0.3rem;
  margin-top: -0.16rem;
  font-size: 0.38rem !important;
  color: #969799;
}
.detail-icon {
  margin-top: -0.12rem;
  font-size: 0.4rem !important;
}
.agreement {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.set-phone-red {
  color: #ff7900;
}
.set-phone-blue {
  color: #00b0f0;
}
.set-phone-black {
  color: black;
}
</style>

